<!--
 * @Author: Charsen
 * @Date: 2025-08-01 20:06
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-28 11:29:15
 * @Description: 
-->
<template>
  <div class="personnel-container">
    <div class="list-header-options">
      <div class="flex-y-center">
        <span class="i-custom-role"></span>
        {{ currentRole?.role_name }}
        <span class="fs14 color-info">（{{ currentRole?.personnels_count || 0 }} 人）</span>
      </div>
      <div>
        <el-link v-action="actions.editPersonnel" :underline="false" @click="setPersonnel">
          <span class="i-custom-personnel mr-6px"></span>
          人员设置
        </el-link>
      </div>
    </div>
    <div class="list-personnel">
      <div v-if="personnels.length === 0" class="color-info px-30px pt-10px">暂无人员!</div>
      <div v-for="(item, index) in personnels" :key="index" class="item">
        <div class="m-fixed">
          <MAvatar :url="item.avatar_url" :size="32" :name="item.real_name" />
        </div>
        <div class="widen">
          <div class="info">
            <span>{{ item.real_name }}</span>
            <span class="departments">{{ joinBy(item.departments, 'short_name') }}</span>
            <i class="i-custom-delete icon" @click="removePersonnel(item.id, index)"></i>
          </div>
          <div class="roles">
            {{ joinBy(item.roles, 'role_name') }}
          </div>
        </div>
      </div>
    </div>

    <Editor
      v-model:visible="editDialog.visible"
      :entity-id="editDialog.id"
      title="人员设置"
      :request-url="personnelUrl"
      :form-size="editDialog.size"
      @on-updated="emit('refresh')"
    />
  </div>
</template>

<script setup lang="ts">
  import { api } from '#/api'
  import { useDestroy } from '#/hooks/useDestroy'
  import { useEditor } from '#/hooks/useEditor'
  import { joinBy } from '#/utils'

  defineOptions({
    name: 'Personnels',
  })

  const props = defineProps<{
    currentRole: any
  }>()

  const emit = defineEmits<{
    (e: 'refresh'): void
  }>()

  const personnels = defineModel<any[]>('personnels', { default: [] })

  const actions = {
    editPersonnel: 'system-authorization-edit-personnel',
  }

  const { handleDestroyWith } = useDestroy({ list: personnels })
  const { editDialog, showEditor } = useEditor()

  const personnelUrl = computed(() => {
    return {
      edit: api.Auth.editPersonnel(props.currentRole.id),
      update: api.Auth.updatePersonnel(props.currentRole.id),
    }
  })

  const removePersonnel = (id: number | string, index: number) => {
    handleDestroyWith({
      destroy: api.Auth.removePersonnel(props.currentRole.id),
      params: { personnel_id: id, ids: [id] },
    })
  }

  const setPersonnel = () => {
    showEditor(props.currentRole.id)
  }
</script>

<style lang="scss" scoped>
  .personnel-container {
    .list-header-options {
      @apply h-60px color-#606266 mx-20px px-0;

      border-bottom: 1px solid #ebeef5;
    }
  }

  .list-personnel {
    display: flex;
    flex-flow: row wrap;
    max-height: 325px;
    padding: 10px 10px 10px 20px;
    overflow-y: auto;
    color: var(--text-color-2);

    .item {
      display: flex;
      flex-direction: row;
      width: 33%;
      border-radius: 5px;

      &:hover {
        background: var(--bg-page);
      }
    }

    .m-fixed {
      flex: 0 0 auto;
      align-self: stretch;
      padding: 10px 0 10px 10px;
      text-align: center;
    }

    .widen {
      position: relative;
      flex: 1 1 auto;
      align-self: stretch;
      padding: 10px 30px 10px 10px;

      .info {
        margin-bottom: 6px;
      }

      .icon {
        position: absolute;
        top: 14px;
        right: 11px;
        font-size: 12px;
        color: var(--text-color-disabled);
        cursor: pointer;

        &:hover {
          color: var(--danger-color);
        }
      }

      .departments {
        margin-left: 8px;
        font-size: 13px;
        color: var(--primary-color);
      }

      .roles {
        padding-right: 20px;
        font-size: 13px;
        color: var(--text-color-place);
      }
    }
  }
</style>
